import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';


import Constants from '../../common/Constants';
import QuanziConstants from './QuanziConstants';
import Config from '../../config';
import {DateUtils} from '../../utils/Utils';
import TImage from '../../components/TImage';
import SizeUtils from '../../common/SizeUtils';
import DataManager from '../../datas/DataManager';
import BaseItem from '../common/BaseItem';

const MAX_SHOW_NUM = 9;

export default class QZ_QunliaoItemView extends BaseItem {
  constructor(props) {
    super(props);
    this._timer = null;

    this.state.unreadedNum = 0;
  }

  componentDidMount() {
    this._initTimer();
    this._requestData();
  }

  componentWillUnmount() {
    this._clearInterval();
  }

  _initTimer() {
    if(this._timer === null) {
      this._timer = setInterval(()=>{
       this._requestData();
     }, 2000);
    }
  }

  _clearInterval() {
    this._timer && clearInterval(this._timer);
  }

  render() {
    return (
      <View style={{
        width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
        marginLeft:SizeUtils.translateDesignWidthToCode(40),
        marginRight:SizeUtils.translateDesignWidthToCode(40),
        paddingTop:SizeUtils.translateDesignWidthToCode(40),
        paddingBottom:SizeUtils.translateDesignHeightToCode(40),
        borderColor:"#eeeeee", borderBottomWidth:SizeUtils.translateDesignNumToCode(3),
        flexDirection:"row",}}>
        {this._renderAvatarContent()}
        {this._renderTextContent()}
      </View>
    )
  }

  _requestData() {
      var num = this._getUnreadedNum(this.props.data.im_group_id);
      if(num != this.state.unreadedNum) {
        this.setState({
          unreadedNum:num,
        })
      }
  }

  _getData() {
    return this.props.data;
  }

  _renderAvatarContent() {
    return (
      <View style={{
          marginRight:SizeUtils.translateDesignHeightToCode(26),
          width:SizeUtils.translateDesignWidthToCode(100), height:SizeUtils.translateDesignWidthToCode(100) }}>
        <TImage style={{width:100, height:100}}
          source={this._getShowImage()} />
        {this._renderUnreadNum()}
      </View>
    )
  }

  _getShowImage() {
    if(this._getData().image_urls && this._getData().image_urls.length > 0) {
      return {uri:this._getData().image_urls[0]};
    }
    else{
      return require("../../../resource/images/quanzi/_tmp/02.png");
    }
  }

  _renderUnreadNum() {
    if(this.state.unreadedNum) {
      return (
        <View style={{width:SizeUtils.translateDesignNumToCode(30),
            height:SizeUtils.translateDesignNumToCode(30), borderRadius:SizeUtils.translateDesignNumToCode(30),
            backgroundColor:"#db3132", position:"absolute", top:0, right:0, flexDirection:"row",
            alignItems:"center", justifyContent:"center"}}>
            <Text style={{fontSize:SizeUtils.translateFontSizeToCode(18), color:"#ffffff", backgroundColor:"#00000000"}}>
              {this.state.unreadedNum > MAX_SHOW_NUM ? (MAX_SHOW_NUM + "+") : this.state.unreadedNum}
            </Text>
        </View>
      )
    }
  }

  _getUnreadedNum(groupId) {
    return DataManager.callMethod(Constants.MODULE_TYPE.IM,
      "getUnreadedMsgNumByGroupId",
      [groupId]);
  }

  _renderTextContent() {
    return (
      <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(10)}}>
        {this._renderName()}
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(24),
          paddingTop:SizeUtils.translateDesignHeightToCode(30),
          color:"#999999"}} numberOfLines={1}>
          {this._getData().desc}
        </Text>
      </View>
    )
  }

  _renderName() {
    return (
      <View style={{flexDirection:"row", alignItems:"center"}}>
        <Text style={{flexDirection:"column", fontSize:SizeUtils.translateFontSizeToCode(28)}}>
          {this._getData().title}
        </Text>
        <TImage source={require("../../../resource/images/quanzi/list_icon_people.png")}
          style={{width:22, height:24, marginLeft:SizeUtils.translateDesignWidthToCode(22)}}/>
        <Text style={{
          marginLeft:SizeUtils.translateDesignHeightToCode(10),
          fontSize:SizeUtils.translateFontSizeToCode(24), color:"#cccccc",}}>
          {this._getData().members_num}
        </Text>
        <Text style={{paddingLeft:SizeUtils.translateDesignHeightToCode(30),
          color:"#999999"}}>
          {this._getStateText()}
        </Text>
      </View>
    )
  }

  _getStateText() {
    let text = "(";
    let update = false;
    if(this._getData().is_member === 1 && this.props.isMy === false) {
        text += "已加入";
        update = true;
    }

    if(this._getData().state == QuanziConstants.QUN_STATUS.shenhe){
      text = this._addMark(update, text);
      text += "审核中";
      update = true;
    }
    else if(this._getData().state == QuanziConstants.QUN_STATUS.pingbi){
      text = this._addMark(update, text);
      text += "被屏蔽";
      update = true;
    }

    text += ")";
    if(update === false) {
      text = "";
    }
    return text;
  }

  _addMark(update, text) {
    if(update === true) {
      text += " | ";
    }
    return text;
  }
}
